<route lang="json5" type="page">
{
  "needLogin": true,
  style: {
    navigationBarTitleText: '一键报修',
  }
}
</route>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const formRef = ref<any>(null)

const form = reactive({
  contact: '',
  phone: '',
  waterMeter: '',
  electricMeter: '',
  reason: '',
  images: [],
})

const rules = {
  contact: [{ required: true, message: '请输入联系人' }],
  phone: [
    { required: true, message: '请输入紧急联系人电话' },
  ],
  waterMeter: [{ required: true, message: '请选择水表' }],
  electricMeter: [{ required: true, message: '请选择电表' }],
  reason: [{ required: true, message: '请输入报修原因' }],
}

const showWaterPicker = ref(false)
const waterMeterColumns = ref([
  ['水表A-101', '水表A-102', '水表B-201'],
])
function onWaterConfirm({ value }: any) {
  form.waterMeter = value[0]
}

const showElecPicker = ref(false)
const elecMeterColumns = ref([
  ['电表A-101', '电表A-102', '电表B-201'],
])
function onElecConfirm({ value }: any) {
  form.electricMeter = value[0]
}

function handleSubmit() {
  uni.navigateTo({
    url: '/pages-user/user/repair/success',
  })
  formRef.value.validate().then(({ isValid }: { isValid: boolean }) => {
    if (isValid) {
      uni.showLoading({ title: '提交中...' })
      setTimeout(() => {
        uni.hideLoading()

        console.log('Form data:', form)
      }, 1500)
    }
  }).catch((error: any) => {
    console.log(error, 'error')
  })
}
</script>

<template>
  <view class="repair-page">
    <wd-form ref="formRef" :model="form" :rules="rules">
      <wd-card title="" custom-class="repair-card">
        <wd-cell-group border>
          <wd-input
            v-model="form.contact" prop="contact" label="联系人" label-width="120px" clearable
            placeholder="请输入用户名"
          />
          <wd-input
            v-model="form.phone" prop="phone" label="紧急联系人电话" label-width="120px" clearable
            placeholder="请输入紧急联系人电话"
          />

          <wd-picker
            v-model="form.waterMeter" prop="waterMeter" label="水表" label-width="120px"
            :columns="waterMeterColumns" :z-index="99999" @confirm="onWaterConfirm"
          />
          <wd-picker
            v-model="form.electricMeter" prop="electricMeter" label="电表" label-width="120px"
            :columns="elecMeterColumns" :z-index="99999" @confirm="onElecConfirm"
          />
        </wd-cell-group>
      </wd-card>

      <wd-card title="报修原因">
        <view class="pb-3">
          <wd-textarea
            v-model="form.reason" prop="reason" label-width="120px" placeholder="请输入报修原因" :maxlength="200"
            clearable show-word-limit
          />
        </view>
      </wd-card>

      <wd-card>
        <template #title>
          <view class="upload-title">
            图片 <text class="text-xs text-gray">
              (可选)
            </text>
          </view>
        </template>

        <wd-upload v-model:file-list="form.images" multiple :limit="6" />
      </wd-card>
    </wd-form>

    <view class="submit-button pb-safe">
      <wd-button type="primary" block size="large" @click="handleSubmit">
        提交
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.repair-page {
  padding-top: 40rpx;
  padding-bottom: 200rpx;
}

.upload-container {
  margin: 10rpx;
}

.upload-container {
  margin: 30rpx;

  .upload-title {
    font-size: 26rpx;
    margin-bottom: 20rpx;
    color: #000;
  }
}

:deep(.wd-textarea) {
  background: #f8f8f8 !important;
  border-radius: 14rpx;

  .wd-textarea__value {
    background-color: transparent;
  }

  .wd-textarea__inner {
    background-color: transparent;
  }

  .wd-textarea__count {
    background-color: transparent;
  }

  .wd-textarea__clear {
    background-color: transparent;
  }
}

:deep(.wd-card__title) {
  font-size: 32rpx;
}

.submit-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 40rpx;
  background-color: #fff;
  z-index: 100;

  :deep(.wd-button) {
    width: 80%;
    margin: 0 auto;
  }
}

:deep(.wd-input) {
  padding: 20rpx 0 !important;
}

:deep(.wd-picker__cell) {
  padding: 20rpx 0 !important;
}
</style>
